<template>
	<view class="system-page">
		<div class="user-card">
			<div class="avatar">
				<u--image shape="circle" :showLoading="true" src="../../../../static/head_avtor.png" width="160rpx"
					height="160rpx"></u--image>
			</div>
			<div class="userinfo">
				<div class="username">{{userinfo.SALER_NAME}}</div>
				<div class="useremail">{{userinfo.USER_NAME}}</div>
			</div>
		</div>
		<div class="menu-cards">
			<div class="menu-card" v-for="i in 1">
				<div class="title">回款核销</div>
				<div class="grids">
					<div class="grid" @click="handleHeXiao">
						<u-icon name="bookmark" size="28"></u-icon>
						<div class="grid-name">核销申请</div>
					</div>
					<div class="grid" @click="handleRkQuery">
						<u-icon name="calendar" size="28"></u-icon>
						<div class="grid-name">收款查询</div>
					</div>
				</div>
			</div>
			<div class="menu-card" v-for="i in 1">
			<div class="title">联动冲差管理</div>
			<div class="grids">
				<div class="grid"  @click="handleEdit">
					<u-icon name="edit-pen" size="28"></u-icon>
					<div class="grid-name">流向登记</div>
				</div>
				<div class="grid" @click="handleGenerate">
					<u-icon name="file-text" size="28"></u-icon>
					<div class="grid-name">证明生成</div>
				</div>
				<div class="grid"  @click="handleUpload">
					<u-icon name="arrow-upward" size="28"></u-icon>
					<div class="grid-name">证明上传</div>
				</div>
				<div class="grid"  @click="handleSearch">
					<u-icon name="search" size="28"></u-icon>
					<div class="grid-name">流向查询</div>
				</div>
			</div>
			</div>

			<div class="layout">
				<u-button type="primary" text="退出登录" @click="handleLayout"></u-button>
			</div>
		</div>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {}
		},
		computed: {
			userinfo() {
				return store.state.userinfo
			},
		},
		methods: {
			handleHeXiao(){
				uni.navigateTo({
					url:'/packageA/pages/writeOff/writeOff'
				})
			},
			handleRkQuery(){
				uni.navigateTo({
					url:'/packageA/pages/subscription/subscription'
				})
			},
			handleLayout(){
				store.commit('logout')
			},
			handleEdit(){
				uni.navigateTo({
					url:'/packageA/pages/linkoffset/edit'
				})
			},
			handleGenerate(){
				uni.navigateTo({
					url:'/packageA/pages/linkoffset/generate'
				})
			},
			handleUpload(){
				uni.navigateTo({
					url:'/packageA/pages/linkoffset/upload'
				})
			},
			handleSearch(){
				uni.navigateTo({
					url:'/packageA/pages/linkoffset/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.system-page {
		.user-card {
			height: 300rpx;
			background-color: #448FFF;
			padding: 59rpx 28rpx;
			display: flex;

			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 180rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 28rpx;
			}

			.userinfo {
				.username {
					color: #fff;
					font-size: 40rpx;
					margin-bottom: 16rpx;
					line-height: 56rpx;
					margin-top: 28rpx;
				}

				.useremail {
					color: #e0e0e0;
					font-size: 28rpx;
				}
			}
		}

		.menu-cards {
			margin-top: -120rpx;
			padding: 0 32rpx;
			padding-bottom: 30rpx;

			.menu-card {
				padding: 32rpx;
				border-radius: 8rpx;
				background-color: #fff;
				box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, .1);
				margin-bottom: 58rpx;
				// height: 400rpx;

				.title {
					font-size: 32rpx;
					margin-bottom: 58rpx;
				}

				.grids {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 24rpx;
					.grid {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.grid-name {
							margin-top: 20rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}

	}
	/deep/.u-icon__icon{
		font-size: 56rpx !important;
	}
</style>
